<template>
    <div>
        <el-breadcrumb separator="/" style="font-size: 16px">
            <el-breadcrumb-item>日程日志</el-breadcrumb-item>
            <el-breadcrumb-item><strong>日程信息列表</strong></el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-card>
            <el-table
                :data="tableData.filter(data => !search ||
                             data.scheduleContent.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%"
                height="500">
                <el-table-column
                    label="日志内容"
                    prop="scheduleContent" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    label="开始日期"
                    prop="startTime">
                </el-table-column>
                <el-table-column
                    label="结束日期"
                    prop="endTime">
                </el-table-column>
                <el-table-column
                    label="提醒日期"
                    prop="reminderTime">
                </el-table-column>

                <el-table-column
                    align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"></el-input>
                    </template>
                    <!--scope可以获取一个范围里的内容-->
                    <template slot-scope="scope">
                        <el-button circle
                                   type="primary"
                                   icon="el-icon-edit"
                                   @click="dialogFormthisisible = true;id=scope.row.scheduleId;getOldSchedule(id)"></el-button>
                        <el-dialog title="日志信息修改" :visible.sync="dialogFormthisisible" style="font-weight: bold;text-align: center">
                            <el-form :model="scheduleDTO">
                                <el-form-item label="日志内容" :label-width="formLabelWidth" style="font-weight: bold">
                                    <el-input
                                        type="textarea"
                                        :autosize="{minRows:5,maxRows:50}"
                                        show-word-limit
                                        maxlength="1000"
                                        v-model="scheduleDTO.scheduleContent"
                                        resize="none"
                                        name="scheduleContent"
                                        class="textarea"
                                        wrap="hard"
                                        clearable></el-input>
                                </el-form-item>
                                <el-form-item label="开始日期-结束日期:" :label-width="formLabelWidth" style="font-weight: bold">
                                    <el-date-picker
                                        v-model="scheduleDTO.time"
                                        type="datetimerange"
                                        range-separator="至"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        name="startTime"
                                        :picker-options="{
                                            disabledDate: (time) => { return time.getTime() < new Date().getTime() }
                                        }"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="提醒日期(必填):" :label-width="formLabelWidth" style="font-weight: bold">
                                    <el-date-picker
                                        v-model="scheduleDTO.reminderTime"
                                        type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期"
                                        name="reminderTime"
                                        :picker-options="{
                                            disabledDate: (time) => { return time.getTime() < new Date().getTime() }
                                        }"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-form>
                            <div class="dialog-footer" style="text-align: center;margin: 0 auto">
                                <el-button @click="info('取消修改');dialogFormthisisible = false">取消修改</el-button>
                                <el-button type="primary" @click="alterSchedule(id)" style="background-color:#FFC200;border-color: #ffffff">确定修改</el-button>
                            </div>
                        </el-dialog>
                        <el-button
                            circle
                            icon="el-icon-delete"
                            style="background-color:#f00;border-color: #fff;color: #fff;margin-left: 20px"
                            @click="id=scope.row.scheduleId;open()"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>

</template>
<script>
  export default {
      data: function () {
          return {
              tableData: [],
              search: '',
              dialogTablethisisible: false,
              dialogFormthisisible: false,
              formLabelWidth: '150px',
              scheduleDTO: {
                  scheduleContent: "",
                  time: [],
                  reminderTime: ""
              },
              id: "",
              fullscreenLoading: false,
              user: {
                  userId: ""
              }
          }
      }
  ,
      methods: {
          // 2，根据获取的id删除一条日程内容
          deleteSchedule(id)
          {
              this.axios.delete("/api/schedule/deleteById/" + id + "/delete").then((response) => {
                  let code = response.data.code;
                  let message = response.data.message;
                  if(code == 10004){
                      this.$message.error(message);
                  }else {
                      this.$message.success(message);
                      for (let i = 0; i < this.tableData.length; i++) {
                          if (id == this.tableData[i].scheduleId && code == 203) {
                              this.tableData.splice(i, 1);
                          }
                      }

                  }
              })
          }
      ,
          // 3，根据id修改一条日程内容
          alterSchedule(id)
          {
              if (this.scheduleDTO.reminderTime == '') {
                  this.alertsNoTime();
              }else {
                  const timestamp = new Date(this.scheduleDTO.reminderTime).getTime();
                  const currentTime = new Date().getTime();
                  if (timestamp <= currentTime) {
                      this.alerts();
                  }else {
                      const delay = timestamp - currentTime;
                      setTimeout(() => {
                          this.loadingList();
                      }, delay);
                      this.axios.put("/api/schedule/alertSchedule/" + id + "/alter", this.scheduleDTO).then((resopnse) => {
                          if(resopnse.data.code == 10004){
                              this.$message.error(resopnse.data.message);
                          }
                          for (let i = 0; i < this.tableData.length; i++) {
                              if (id == this.tableData[i].scheduleId) {
                                  this.tableData[i].scheduleContent = resopnse.data.data.scheduleContent;
                                  this.tableData[i].startTime = resopnse.data.data.startTime;
                                  this.tableData[i].endTime = resopnse.data.data.endTime;
                                  this.tableData[i].reminderTime = resopnse.data.data.reminderTime;
                                  this.$message.success(resopnse.data.message);
                                  this.dialogFormthisisible = false;
                              }
                          }
                          location.reload();
                      })
                  }

              }

          }
      ,
          // 4，根据id获取一条内容内容
          getOldSchedule(id) {
              for (let i = 0; i < this.tableData.length; i++) {
                  if (id == this.tableData[i].scheduleId) {
                      this.scheduleDTO.scheduleContent = this.tableData[i].scheduleContent;
                      this.scheduleDTO.time[0] = this.tableData[i].startTime;
                      this.scheduleDTO.time[1] = this.tableData[i].endTime;
                      if(this.tableData[i].reminderTime != '已提醒'){
                          this.scheduleDTO.reminderTime = this.tableData[i].reminderTime;
                      }
                  }
              }
          }
      ,
          info(title)
          {
              this.$message(title);
          }
      ,
          open() {
              this.$confirm('此操作将永久删除该条日程记录, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
              }).then(() => {
                  this.deleteSchedule(this.id)
              }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '已取消删除'
                  });
              });
          }
      ,
          alerts() {
              this.$alert('您所选择的提醒时间点已经是过去时了，无法进行选择', '提示信息', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
              });
          }
      ,
          alertsNoTime() {
              this.$alert('您未选择有效的提醒时间点', '提示信息', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
              });
          },
          loadingList(){
              this.user = localStorage.getItem('user')?JSON.parse(localStorage.user):null;
              // 5，在页面加载时根据showList请求获取数据库的一组数据进行展示
              this.axios.get("/api/schedule/showList/" + this.user.userId + "/getUserScheduleList").then((response) => {
                  this.tableData = response.data.data;
                  // 6,到点提示功能
                  for (let i = 0; i < this.tableData.length; i++) {
                      if (this.tableData[i].reminderTime != null) {
                          let reminderTime = new Date(this.tableData[i].reminderTime);
                          let timeDiff;
                          if (this.tableData[i + 1] != undefined) {
                              if (this.tableData[i].reminderTime == this.tableData[i + 1].reminderTime) {
                                  timeDiff = reminderTime.getTime() - (Date.now() + 1000);
                              } else {
                                  timeDiff = reminderTime.getTime() - Date.now();
                              }
                          } else {
                              timeDiff = reminderTime.getTime() - Date.now();
                          }
                          setTimeout(() => {
                              this.scheduleDTO.scheduleContent = this.tableData[i].scheduleContent;
                              this.scheduleDTO.time[0] = this.tableData[i].startTime;
                              this.scheduleDTO.time[1] = this.tableData[i].endTime;
                              this.scheduleDTO.reminderTime = null;
                              this.axios.put("/api/schedule/alertSchedule/" + this.tableData[i].scheduleId + "/alter", this.scheduleDTO);
                              this.tableData[i].reminderTime = '已提醒';
                          }, timeDiff);
                      } else {
                          this.tableData[i].reminderTime = '已提醒';
                      }
                  }
              })
          }
      }
  ,
      mounted() {
          this.loadingList();
      }
  }
</script>